<template>
  <div class="TestResult">
    <div class="content">
      <div class="body">
        <div class="img">
          <img
            :src="items.userInfo.avatar"
            alt="">
        </div>
        <div class="name">
          {{items.userInfo.nickname}}
        </div>
        <div class="text">
          <div class="fasr-div">
            <p>阅读等级</p>
            <p>{{items.userInfo.read_level}}</p>
          </div>
          <div class="nth-div">
            <p>词汇量</p>
            <p>{{items.userInfo.vocabulary}}</p>
          </div>
          <div class="last-div">
            <p>超过人数</p>
            <p>{{parseFloat(items.userInfo.percentage_ranking)}}<span>%</span></p>
          </div>
        </div>
        <div class="btns" v-if="!isshares">
          <btn :obj="btnstyles" :text="btntexts" v-on:statr="carry(1)" :icon="2" :iconfon="iconfont"></btn>
          <btn :obj="btnstyle" :text="btntext" v-on:statr="carry(2)" :icon="1" :iconfont="iconfont"></btn>
        </div>
        <div class="cten" v-if="isshares">
          <div class="title">【来和我PK一下】</div>
          <div class="texts">
            <div class="erwim">
              <img :src="items.wxMpPromotionInfo.promotion_qr" alt="">
            </div>
            <div class="imgs">
              <img src="../../assets/img/TestResult/en.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <Shares v-if="shares" :show="2" :ishide="shares" v-on:hide="hideshares"></Shares>
  </div>
</template>

<script>
  import btn from '../../components/btnicon/index'
  import Shares from '../../components/Share/index'
  import {Toast} from 'mint-ui'

  export default {
    name: 'index',
    data: function () {
      return {
        btnstyle: {
          backgroundColor: '#ffd000',
          width: '60%',
          color: '#66440a',
          opacity: 1,
          boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
        },
        testing: JSON.parse(sessionStorage.getItem('testing')),
        btntext: '分享炫耀一下',
        btnstyles: {
          opacity: 1,
          border: 'none',
          color: '#ff8800',
          width: '60%',
          height: '2rem',
          fontSize: '1.2rem',
          backgroundColor: '#fff',
        },
        iconfont: {
          fontSize: '1.2rem'
        },
        btntexts: '返回首页',
        shares: false,
        isshares: false,
        items: {
          userInfo: {
            avatar: require('../../assets/img/BookShelf/zhang1.png'),
            nickname: '',
            read_level: 0,
            read_words: 0,
            read_days: 0,
            vocabulary: 0,
            percentage_ranking: 0
          }
        }
      }
    },
    mounted: function () {
      var date
      if (this.$route.query.share_id) {
        date = {
          share_id: this.$route.query.share_id,
          user_token: this.$Login.oauth_token.user_token,
          oauth_token: this.$Login.oauth_token.oauth_token,
          share_token: this.$route.query.share_token
        }
        this.vocabulary_info(date)
      } else {
        this.updata(this.testing)
        date = {
          share_type: 1,
          user_token: this.testing.user_token,
          oauth_token: this.testing.oauth_token,
          post_id: this.testing.chapter_id,
          share_mode: -1
        }
        this.share(date)
      }
    },
    methods: {
      carry: function (str) {
        if (str === 1) {
          return this.$router.push({
            name: 'Home'
          })
        }
        if (str === 2) {
          this.shares = true
        }
      },
      updata: function (data) {
        this.$axios.exam_result(data).then(res => {
          this.items = res.data.qing_data
          this.isshares = false
        })
      },
      vocabulary_info: function (data) {
        this.$axios.vocabulary_info(data).then(res => {
          this.isshares = true
          this.items = res.data.qing_data
        })
      },
      hideshares: function () {
        this.shares = false
      },
      share: function (data) {
        var _this = this
        this.$axios.share(data).then(res => {
          var json = {
            user_token: this.$Login.oauth_token.user_token,
            oauth_token: this.$Login.oauth_token.oauth_token,
            share_id: res.data.qing_data.we_share_parameter.share_id,
            share_token: res.data.qing_data.we_share_parameter.share_token
          }
          var data = {
            title: res.data.qing_data.we_share_parameter.title,
            desc: res.data.qing_data.we_share_parameter.desc,
            link: res.data.qing_data.we_share_parameter.link,
            imgUrl: res.data.qing_data.we_share_parameter.imgUrl
          }
          this.$wx.ShareTimeline(data, res => {
            if (res.share_mode === 4) {
              json.share_mode = 1
              json.share_state = 1
            } else {
              json.share_mode = 1
              json.share_state = 0
            }
            _this.share_dones(json)
          })
          this.$wx.ShareAppMessage(data, res => {
            if (res.share_mode === 2) {
              json.share_mode = 2
              json.share_state = 1
            } else {
              json.share_mode = 2
              json.share_state = 0
            }
            _this.share_dones(json)
          })
        })
      },
      share_dones: function (data) {
        this.$axios.share_dones(data).then(res => {
          this.shares = false
          Toast({
            message: res.data.qing_text,
            iconClass: 'iconfont icon-tianjiachenggong',
            duration: 3000
          })
        })
      }
    },
    components: {btn, Shares}
  }
</script>

<style scoped>
  @import "../../assets/css/views/TestResult/index.css";
</style>
